<!--
 * @Author: dvlproad
 * @Date: 2022-12-27 11:59:38
 * @LastEditors: dvlproad
 * @LastEditTime: 2022-12-28 11:54:06
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>html demo</title>
</head>

<body>
  <div style="margin-top: 80px;" id="fromFlutter"><span>Flutter发送过来的消息是： </span></div>
  <div id="toFlutter"><span>我发送给Flutter的消息是：</span></div>
  
  <textarea id="h5SendMessageToBridge" style="height: 300px; width: 300px;">多行的文本输入框</textarea>
  <button onclick="h5Action_updateTextAreaValue_Toast()">h5Action_updateTextAreaValue_Toast</button>
  <button onclick="h5Action_showAppToast()">h5Action_showAppToast</button>

  <button onclick="h5Action_updateTextAreaValue_jumpAppPage()">h5Action_updateTextAreaValue_jumpAppPage</button>
  <button onclick="h5Action_jumpAppPage()">h5Action_jumpAppPage</button>
</body>
<script>
  // 这个方法是用来给Flutter调用的（即：Flutter调用js方法）
  function fromFlutterMessage(message) {
    document.getElementById("fromFlutter").innerHTML = message;
    return true;
  }

  // h5Action_showAppToast
  function h5Action_updateTextAreaValue_Toast() {
    var message = '这里是来自JavaScript的方法:h5Action_showAppToast';
    document.getElementById("toFlutter").innerHTML = message;
    document.getElementById("h5SendMessageToBridge").innerHTML = message;
    console.log(message.message);
  }

  // 这个方法是用来发送一个消息给Flutter的（即：js调用Flutter方法）
  function h5Action_showAppToast() {
    var message= document.getElementById("h5SendMessageToBridge").value;
    h5CallBridgeAction_showAppToast.postMessage(message);
    console.log(message.message);
  }

  // h5Action_jumpAppPage
  function h5Action_updateTextAreaValue_jumpAppPage() {
    /// 处理协议跳转
    /// 规则说明：
    /// yuanwangwu://openpage?pageName=XXXX&orderId=XXXXX
    /// 如果是从外部h5跳转app使用 yuanwangwu://openpage?pageName=webPage&url=URLEncode(http://www.baidyu.com)
    /// 例：yuanwangwu://openpage?pageName=webPage&url=http%3A%2F%2Fwww.baidu.com
    /// 如果是跳转到内部页面 使用：yuanwangwu://openpage?pageName=XXXXXX&id=XXX
    /// 例：yuanwangwu://openpage?pageName=testPage&id=123
    /// 如果是跳转【微信小程序】 使用：yuanwangwu://openpage?pageName=mp&path=URLEncode(XXX)
    /// 例：略
    var message = 'yuanwangwu://openpage?pageName=webPage&url=URLEncode(http://www.baidyu.com)';
    document.getElementById("toFlutter").innerHTML = message;
    document.getElementById("h5SendMessageToBridge").innerHTML = message;
    console.log(message.message);
  }

  function h5Action_jumpAppPage() {
    var sendMessage= document.getElementById("h5SendMessageToBridge").value;
    h5CallBridgeAction_jumpAppPage.postMessage(sendMessage);
  }
</script>

</html>
